<template>
  <div>
    <el-dialog
      :model-value="visible"
      title="企业续费"
      width="500"
      :close-on-click-modal="false"
      @close="cls"
    >
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="当前到期日期：">
          <el-input v-model="time" :disabled="true" />
        </el-form-item>
        <el-form-item label="增加续费时间：">
          <el-input v-model="form.month" placeholder="最小单位：月" />
        </el-form-item>
        <el-form-item label="续费金额：">
          <el-input v-model="form.money" />
        </el-form-item>
        <el-form-item label="当前企业可用余额：">
          <el-input v-model="useMoney" :disabled="true" />
        </el-form-item>
      </el-form>
      <div class="footer">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="cls"> 不保存关闭 </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { xufeiEnterprise } from "@/api/platform/enterprise.js";
import { ElMessage } from "element-plus";
//定义属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

//定义表单数据
const form = ref({
  month: "",
  money: ""
});
//自定义事件
const emits = defineEmits(["close", "refresh"]);

function cls() {
  //发送事件
  emits("close");
}

//可用资金
let useMoney = ref("");
//到期时间
const time = ref("");
//id
const id = ref("");
//保存
function save() {
  let data = {
    eid: id.value,
    month: form.value.month,
    money: form.value.money
  };
  xufeiEnterprise(data).then(res => {
    if (res.code == 200) {
      ElMessage({
        message: "续费成功",
        type: "success",
        plain: true
      });
      cls();
      //通知父组件刷新
      emits("refresh");
    }
  });
  form.value=""
}
//初始函数
function init(data) {
  useMoney.value = data.money - data.freezeMoney;
  time.value = data.expireDate;
  id.value = data.id;
}

//暴露
defineExpose({ init });
</script>
<style scope>
.footer {
  line-height: 40px;
  text-align: center;
}
</style>
